<template>
    <div class="layout" id='app'>
        <Layout>
            <Header>
                <div class="layout-logo">
                    <!-- <img src="../assets/logo-white.png"> -->
                    <img src="../assets/2222.png" style="height: 40%;">
                    <span style="font-family: YouYuan;">语云数据融合服务1.0</span>&nbsp;&nbsp;
                    <!-- <small>上次登陆：2019-08-29 13:25 &nbsp;&nbsp;北京市</small> -->
                </div>
                <div class="layout-user">
                    <!--<img src="../assets/4.png">-->
                    <Avatar style="background: #19be6b" icon="ios-person"></Avatar>&nbsp;
                    <Dropdown trigger="click">
                        <a href="javascript:void(0)" style="color: white;">
                            {{userInfo}}
                            <Icon type="md-arrow-dropdown" />
                        </a>
                        <DropdownMenu slot="list">
                            <router-link to='/changePassword'>
                                <DropdownItem>修改密码</DropdownItem>
                            </router-link>
                            <a @click="confirm">
                                <DropdownItem>注销</DropdownItem>
                            </a>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </Header>
            <Layout
                style="display:flex;position: absolute;top: 44px;bottom: 0px;overflow: hidden;width: 100%; height: auto;">
                <Sider hide-trigger>
                    <Menu theme="dark" width="auto" :open-names="['1-1']">
                        <router-link to='/sourceManage'>
                            <MenuItem name="1">
                            <Icon type="md-speedometer" />
                            <span>数据源管理</span>
                            </MenuItem>
                        </router-link>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="md-list-box" />
                                数据查询
                            </template>
                            <router-link to='/sqlSearch'>
                                <MenuItem name="2-1">
                                <Icon type="md-analytics" />
                                <span>SQL查询</span>
                                </MenuItem>
                            </router-link>
                            <router-link to='/sqlTaskList'>
                                <MenuItem name="2-2">
                                <Icon type="md-globe" />
                                <span>SQL任务列表</span>
                                </MenuItem>
                            </router-link>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="md-list-box" />
                                接口管理
                            </template>
                            <router-link to='/postAPI'>
                                <MenuItem name="3-1">
                                <Icon type="md-analytics" />
                                <span>发布API</span>
                                </MenuItem>
                            </router-link>
                            <router-link to='/APIList'>
                                <MenuItem name="3-2">
                                <Icon type="md-globe" />
                                <span>API管理</span>
                                </MenuItem>
                            </router-link>
                            <router-link to='/keyManage'>
                                <MenuItem name="3-3">
                                <Icon type="md-globe" />
                                <span>API KEY管理</span>
                                </MenuItem>
                            </router-link>
                        </Submenu>
                        <!-- <router-link to='/dataAnalysis'>
                            <MenuItem name="4">
                            <Icon type="md-desktop" />
                            <span>数据分析</span>
                            </MenuItem>
                        </router-link> -->
                        <Submenu name="5">
                            <template slot="title">
                                <Icon type="md-list-box" />
                                日志审计
                            </template>
                            <router-link to='/operationLog'>
                                <MenuItem name="5-1">
                                <Icon type="md-analytics" />
                                <span>操作日志</span>
                                </MenuItem>
                            </router-link>
                            <router-link to='/linkAccessLog'>
                                <MenuItem name="5-2">
                                <Icon type="md-globe" />
                                <span>API调用日志</span>
                                </MenuItem>
                            </router-link>
                        </Submenu>
                        <Submenu name="6">
                            <template slot="title">
                                <Icon type="md-mail" />
                                系统管理
                            </template>
                            <router-link to='/user'>
                                <MenuItem name="6-1">
                                <Icon type="md-send" />
                                <span>用户</span>
                                </MenuItem>
                            </router-link>
                            <!-- <router-link to='/setUp'>
                                <MenuItem name="6-2">
                                <Icon type="md-list" />
                                <span>设定</span>
                                </MenuItem>
                            </router-link> -->
                        </Submenu>
                        <!-- <router-link to='/helloWorld'>
                            <MenuItem name="1-9">
                            <Icon type="md-settings" />
                            <span>测试</span>
                            </MenuItem>
                        </router-link> -->
                    </Menu>
                </Sider>
                <Layout :style="{padding: '14px 14px 14px 14px',height:'auto'}">
                    <Content :style="{padding: '24px',  background: '#fff'}">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<style scoped>
    html,
    body,
    #app {
        height: 100%;
        min-width: 1260px;

    }

    #app {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .ivu-layout {
        height: 44px;
        background: transparent;
    }

    .ivu-layout-header {
        height: 44px;
        line-height: 44px;
        /* background:#2b85e4; */
        background: #2d8cf0;
        padding: 0 20px;
    }

    .layout {
        /* border: 1px solid #d7dde4; */
        background: #f5f7f9;
        position: relative;
        /* border-radius: 4px; */
        overflow: hidden;
    }

    .layout-logo {
        width: 500px;
        height: 44px;
        /* background: #5b6270; */
        /* border-radius: 3px; */
        float: left;
        position: relative;
        top: 0px;
        left: 0;
        font-size: 16px;
        color: white;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .layout-logo small {
        font-size: 12px;
        letter-spacing: 0;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-user {
        min-width: 100px;
        height: 44px;
        border-radius: 3px;
        float: right;
        position: relative;
        top: 0px;
        right: 0;
        font-size: 13px;
        color: white;
    }
</style>
<script>
    import { mapState, mapActions } from 'vuex'
    export default {
        computed: mapState({
            Authorization: state => state.Authorization,
            userInfo:state => state.userInfo
        }),
        name: 'Home',
        data() {
            return {
                username: 'admin'
            }
        },
        mounted() {
            console.log(this.userInfo,'userInfo')
        },
        watch:{

        },
        methods: {
            confirm: function () {
                this.$Modal.confirm({
                    title: '注销登录',
                    content: '<p>您确定要注销本次登录吗？</p>',
                    onOk: () => {
                            localStorage.removeItem('Authorization');
                            localStorage.removeItem('userInfo');
                            localStorage.removeItem('login');
                            this.$router.push('/')
                            location.reload()
                    },
                    onCancel: () => {

                    }
                });
            }
        }
    }
</script>